<template>
  <view>
    <base-container>
      <view>
        <base-card :title="form.repairTime">
          <template #extra>
            {{ tabs.find(v => v.key == form.flag)?.name }}
          </template>
          <view style="margin-bottom: 20rpx; font-size: 30rpx;">
            <text style="display: inline-block; width: 200rpx;color: #999999;">预计取车时间</text>
            <text style="color: #333333;"> {{ form.pickupTime }}</text>
          </view>
          <view style="margin-bottom: 20rpx; font-size: 30rpx;">
            <text style="display: inline-block; width: 200rpx;color: #999999;">申请人</text>
            <text style="color: #333333;"> {{ form.ctPersonName }}</text>
          </view>
          <view style="margin-bottom: 20rpx; font-size: 30rpx;">
            <text style="display: inline-block; width: 200rpx;color: #999999;">车牌号</text>
            <text style="color: #333333;"> {{ form.plateNumber }}</text>
          </view>
          <view style="margin-bottom: 20rpx; font-size: 30rpx;">
            <text style="display: inline-block; width: 200rpx;color: #999999;">故障原因</text>
            <text style="color: #333333;"> {{ form.reason }}</text>
          </view>
          <view style="margin-bottom: 20rpx; font-size: 30rpx;">
            <text style="display: inline-block; width: 200rpx;color: #999999;">维修人</text>
            <text style="color: #333333;"> {{ form.repairUserName }}</text>
          </view>
          <view style="margin-bottom: 20rpx; font-size: 30rpx;">
            <text style="display: inline-block; width: 200rpx;color: #999999;">故障图片</text>
            <base-images :disabled="true" v-model="form.img"/>
          </view>
        </base-card>
        <base-card v-if="form.completeTime">
          <view style="margin-bottom: 20rpx; font-size: 30rpx;">
            <text style="display: inline-block; width: 200rpx;color: #999999;">完成时间</text>
            <text style="color: #333333;"> {{ form.completeTime }}</text>
          </view>
          <view style="margin-bottom: 20rpx; font-size: 30rpx;">
            <text style="display: inline-block; width: 200rpx;color: #999999;">使用材料</text>
            <text style="color: #333333;"> {{ form.usedMaterial }}</text>
          </view>
          <view style="margin-bottom: 20rpx; font-size: 30rpx;">
            <text style="display: inline-block; width: 200rpx;color: #999999;">维修费用</text>
            <text style="color: #333333;"> {{ form.upkeep }} 元</text>
          </view>
          <view style="margin-bottom: 20rpx; font-size: 30rpx;">
            <text style="display: inline-block; width: 200rpx;color: #999999;">备注</text>
            <text style="color: #333333;"> {{ form.remark }}</text>
          </view>
          <view style="margin-bottom: 20rpx; font-size: 30rpx;">
            <text style="display: inline-block; width: 200rpx;color: #999999;">维修资料</text>
            <base-images :disabled="true" v-model="form.completeImg"/>
          </view>
        </base-card>
      </view>
      <template #actions>
        <button v-if="['reject'].includes(form.flag)" size="mini"
                @click.stop="toPath('pages/mys/bookkeeping/detail?edit=true&id=' + form.id)">
          修改
        </button>
        <button v-if="['audit','reject'].includes(form.flag)" size="mini"
                type="warn" @click.stop="remove(form)">
          删除
        </button>
      </template>
    </base-container>
  </view>
</template>

<script>
import {VehicleRepairApi as Api} from "@/comms/api/vehicleRepairApi";
import {Msg, toBack, toPath} from "@/utils/BaseUtils";

export default {
  data() {
    return {
      params: {},
      form: {},
      tabs: [
        {key: 'apply', name: '报修',},
        {key: 'dispatch', name: '派修'},
        {key: 'repair', name: '维修'},
        {key: 'complete', name: '完成'},
      ]
    };
  },
  onLoad(params) {
    this.params = params;
    uni.setNavigationBarTitle({title: "维修详情"});
  },
  mounted() {
    this.loadDate(this.params)
  },
  methods: {
    toPath,
    async loadDate({id}) {
      Msg.loading(async close => {
        if (id) {
          await Api.detail({id}).then(({data}) => this.form = {...data})
        }
        close?.();
      })
    },
    remove({id}) {
      Msg.confirm("确定删除该手工记账信息?")
          .then(() => {
            Api.delete({id}).then(res => {
              Msg.success("删除成功")
              toBack?.()
            })
          })
    }
  }
}
</script>

<style lang="scss">

</style>
